<template>
	<view class="base">
		<view class="detail">
			<view class="detail-item detail-img">
				<view class="detail-left">
					头像
				</view>
				<view class="detail-right-img">
					<view class="detail-right">
						<uni-file-picker v-model="imageValue" file-mediatype="image" :del-icon="false" :limit="1"
							disable-preview @select="select" :imageStyles="imageStyles" />
						<uni-icons type="forward" color="#9D9E9D"></uni-icons>
					</view>


				</view>
			</view>
			<view class="detail-item">
				<view class="detail-left">
					昵称
				</view>
				<view class="detail-right">
					<input type="text" v-model="userInfo.nickname">
					<uni-icons type="forward" color="#9D9E9D"></uni-icons>
				</view>
			</view>
			<view class="detail-item">
				<view class="detail-left">
					手机号
				</view>
				<view class="detail-right">
					<input type="text" v-model="userInfo.mobile">
					<uni-icons type="forward" color="#9D9E9D"></uni-icons>
				</view>
			</view>
			<view class="detail-item detail-school">
				<view class="detail-left">
					学校
				</view>
				<view class="detail-right">
					<input type="text" v-model="userInfo.school" placeholder="设置学校信息">
					<uni-icons type="forward" color="#9D9E9D"></uni-icons>
				</view>
			</view>
			<view class="detail-item">
				<view class="detail-left">
					生日
				</view>
				<view class="detail-right">
					<input type="text" v-model="userInfo.birthday" placeholder="设置生日信息">
					<uni-icons type="forward" color="#9D9E9D"></uni-icons>
				</view>
			</view>
			<view class="detail-item">
				<view class="detail-left">
					性别
				</view>
				<view class="detail-right">
					<input type="text" v-model="userInfo.gender" placeholder="设置性别">
					<uni-icons type="forward" color="#9D9E9D"></uni-icons>
				</view>
			</view>

		</view>
		<button class="exit" @click="exit">退出登录</button>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config.js'
	import {
		uploadAvatar
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				userInfo: '',
				imageValue: [],
				imageStyles: {
					width: 60,
					height: 60,
					border: {
						radius: '50%'
					}
				}
			}
		},
		methods: {
			exit() {
				this.$modal.confirm('是否确定退出').then(res => {
					this.$store.dispatch('LogOut').then(res => {
						if (res == 200) {
							uni.removeStorageSync('accountNumber')
							this.$modal.msgSuccess('退出成功')
							setTimeout(() => {
								this.$tab.reLaunch('/pages/index')
							}, 500)
						}
					})
				})
			},
			islogin() {
				if (uni.getStorageSync('userInfo')) {
					this.$store.dispatch('GetInfo').then(res => {
						if (!res.code == 200) return this.$modal.msgError('个人信息获取成功')
						this.userInfo = uni.getStorageSync('userInfo')
						if (this.userInfo.avatar) return this.imageValue.push({
							url: this.imageValue[0].url = this.userInfo.avatar,
							extname: 'png',
							name: 'shuijiao.png'
						})

					})
				}
			},
			select(file) {
				console.log(file, 1)
				let data = {
					file: file.tempFiles[0].path
				}
				uploadAvatar(data).then(res => {
					console.log(res)
				})
			}
		},
		onLoad() {
			this.islogin()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #65A8F2;
	}

	.base {
		margin: 0;
		padding: 0;
	}

	.detail {
		width: 100%;
		height: 640rpx;

		.detail-item {
			position: relative;
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 1rpx solid #ccc;
			line-height: 100rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 0 30rpx;

			.detail-left {
				height: 100rpx;
				line-height: 100rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
			}

			.detail-right {
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				color: rgba(151, 151, 151, 1);
				font-size: 28rpx;
				vertical-align: middle;

				input {
					width: 400rpx;
					height: 100rpx;
					font-size: 30rpx;
					text-align: right;
				}

				uni-icons {
					vertical-align: middle;
					margin-left: 20rpx;
				}
			}

			.detail-right-img {
				margin-top: 20rpx;


				.detail-right {
					width: 160rpx;
					display: flex;
					justify-content: flex-end;

				}
			}
		}

		.detail-school {
			.detail-right {
				color: rgba(16, 16, 16, 1);
			}
		}

		.detail-img {
			height: 140rpx;

			.detail-left {
				height: 140rpx;
				line-height: 140rpx;
			}

			.detail-right {
				width: 100rpx;
				height: 100rpx;
				border-radius: 200rpx;
				// margin-top: 20rpx;
				// border: 1rpx solid #ccc;

			}
		}
	}



	.exit {
		width: 700rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-top: 100rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 40rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		font-family: Microsoft Yahei;
		border: 1px solid rgba(187, 187, 187, 1);
	}
</style>
